<script lang="ts">
export default {
  name: 'Study4StuDemo4'
}
</script>

<template>
  <h2>额外的 ref 解包细节</h2>
  <div class="note"></div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';


const count = ref(0)
const state = reactive({
  count: count,
  countVal: count.value
})
console.log('---------------4--------------');

console.log(state.count,'state.count'); // 0
state.count = 100
console.log(state.count,'state.count'); // 100
console.log(state.countVal,'state.countVal');  // 0
console.log(count,'count');  // ref - 100


state.countVal = 200
console.log(state.count,'state.count');   // 100
console.log(state.countVal,'state.countVal');  // 200
console.log(count,'count');  // ref - 100
console.log('---------------4--------------');

</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
